<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div id="joys_box">
    <tabbar class="nav_box">
      <tabbar-item selected link="/Home">
        <img slot="icon" src="@/assets/img/home.png">
        <img slot="icon-active" class="activeImg" src="@/assets/img/homeActive.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :class="{infoFint:isInfoFint}" :badge="this.infoNowNumber" link="/Info">
        <img slot="icon" src="@/assets/img/info.png">
        <img slot="icon-active" class="activeImg" src="@/assets/img/infoActive.png">
        <span slot="label">信息</span>
      </tabbar-item>
      <tabbar-item link="/Sue">
        <img slot="icon" src="@/assets/img/sue.png">
        <img slot="icon-active" class="activeImg" src="@/assets/img/sueActive.png">
        <span slot="label">应用</span>
      </tabbar-item>
      <tabbar-item show-dot link="/My">
        <!-- :selected="selected == 'Shopcar'" -->
        <img slot="icon" src="@/assets/img/my.png">
        <img slot="icon-active" class="activeImg" src="@/assets/img/myActive.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
// import { ViewBox, Tabbar, TabbarItem } from 'vux'
import { Tabbar, TabbarItem, Group, Cell } from "vux";
export default {
  name: "tab",
  data() {
    return {
      selected: "/Home", //选项卡选中状态
      infoNowNumber: "",
      isInfoFint: false
    };
  },
  mounted() {
    //  this.selected = "/Home";
  },
  watch: {
    $route(to, from) {
      if (this.$route.path === "/Home") {
        this.selected = "/Home";
      } else if (this.$route.path === "/Info") {
        this.selected = "/Info";
        this.infoNow();
      } else if (this.$route.path === "/Sue") {
        console.log("tag", "ggggggg");
        this.selected = "/Sue";
      } else if (this.$route.path === "/My") {
        this.selected = "/My";
      }
    }
  },
  methods: {
    // infoNowTime(){
    // setInterval(() => {
    // this.infoNow()
    // }, 000);
    // },
    infoNow() {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-admin/message/page",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          messageStatus: "UNREAD",
          pageIndex: 1,
          pageSize: 1000
        }
      })
        .then(res => {
          this.infoNowNumber = String(res.data.total);
          if (this.infoNowNumber <= 0) {
            this.isInfoFint = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.infoNow();
  },
  created() {},
  created() {},
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  }
};
</script>

<style scoped lang="less">
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
#joys_box {
  // height: 0.53rem;
  height: 100%;
  position: fixed;
  left: 0rem;
  z-index: 190;
  .nav_box {
    float: left;
    position: fixed;
    padding-top: 0.03rem;
    text-align: center;
    // height: 100px;

    // background: #fff;
    background: #fcfcfc;
    a {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
      background: rgba(255, 255, 255, 0.62);
    }
  }
}
</style>
<style>
.infoFint .vux-badge-single {
  display: none;
}
</style>
